/* settings-themes.css - 主题适配样式 */

/* 深色主题适配 */
.dark .settings-header h2 {
  color: #ffffff; /* 纯白色 */
}

/* 蓝色主题适配 */
.blue .settings-header h2 {
  color: #0d47a1; /* 蓝色主题保持原有颜色 */
}

/* 绿色主题适配 */
.green .settings-header h2 {
  color: #2e7d32; /* 绿色主题保持原有颜色 */
}

/* 紫色主题适配 */
.purple .settings-header h2 {
  color: #6a1b9a; /* 紫色主题保持原有颜色 */
}

.dark .settings-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.dark .settings-modal {
  background: #050505;
  color: #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.dark .settings-header {
  background: linear-gradient(135deg, #0a0a0a 0%, #050505 100%);
  border-bottom-color: #484848;
}

.dark .settings-header h2 {
  color: #f1f5f9;
}

.dark .close-btn {
  background: #2a2a2a;
  color: #cccccc;
}

.dark .close-btn:hover {
  background: #4a4a4a;
  color: #ffffff;
  /* 发光光晕阴影特效 - 白色光晕 */
  box-shadow: 
    0 0 12px rgba(255, 255, 255, 0.6);
}

.dark .settings-sidebar {
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  border-right-color: #2a2a2a;
}

.dark .menu-item {
  color: #cbd5e1;
}

.dark .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  /* 发光光晕阴影特效 - 白色光晕 */
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(255, 255, 255, 0.6);
}

.dark .menu-item.active {
  background-color: rgba(255, 255, 255, 0.365);
  color: #ffffff;
  /* 发光光晕阴影特效 - 白色光晕 */
  box-shadow: 
    0 2px 8px rgba(255, 255, 255, 0.2),
    0 0 16px rgba(255, 255, 255, 0.683);
}

.dark .settings-content {
  background: #2a2a2a;
}

.dark .setting-item {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

.dark .setting-item:hover {
  background: #1a1a1a;
}

.dark .setting-item label {
  color: #e2e8f0;
}

.dark .setting-item select {
  background: #2a2a2a;
  color: #e6e6e6;
  border-color: #3a3a3a;
}

.dark .setting-item select:hover {
  border-color: #cccccc;
}

.dark .setting-item select:focus {
  border-color: #cccccc;
}

.dark .setting-item select option {
  background: #2a2a2a;
  color: #e6e6e6;
}

.dark .setting-description {
  color: #94a3b8;
}

.dark .setting-label {
  color: #cbd5e1;
}

.dark .version {
  color: #cccccc;
}

.dark .about-content {
  color: #e2e8f0; /* 更亮的文字颜色 */
}

.dark .about-content h4 {
  color: #ffffff; /* h4标题使用纯白色 */
}

.dark .about-content p {
  color: #cbd5e1; /* 段落文字保持原有亮度 */
}

.dark .about-content a {
  color: #cccccc; /* 链接使用灰色 */
}

.dark .about-content a:hover {
  color: #ffffff; /* 悬停时使用白色 */
}

.dark .about-content .version-info {
  background: #0a0a0a; /* 更深的黑色背景 */
  color: #e2e8f0; /* 文字颜色更亮 */
}

.dark .about-content .feature-list li {
  color: #e2e8f0; /* 列表项文字更亮 */
}

.dark .about-content .feature-list li::before {
  color: #cccccc; /* 列表项标记使用灰色 */
}

.dark .settings-content::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.dark .settings-content::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}

.dark .settings-content::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* 蓝色主题适配 */
.blue .settings-header {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-bottom: 1px solid rgba(33, 150, 243, 0.2);
}

.blue .settings-header h2 {
  color: #0d47a1;
}

.blue .settings-sidebar {
  background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
}

.blue .menu-item {
  color: #0d47a1;
}

.blue .menu-item:hover {
  background-color: rgba(100, 181, 246, 0.2);
  color: #0d47a1;
  /* 发光光晕阴影特效 */
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 0 16px rgba(33, 150, 243, 0.4);
}

.blue .menu-item.active {
  background-color: rgba(100, 181, 246, 0.3);
  color: #0d47a1;
  /* 发光光晕阴影特效 */
  box-shadow: 
    0 2px 8px rgba(100, 181, 246, 0.1),
    0 0 16px rgba(33, 150, 243, 0.4);
}

.blue .close-btn {
  background: rgba(197, 225, 255, 0.8);
  color: #0d47a1;
}

.blue .close-btn:hover {
  background: rgba(220, 235, 255, 1);
  color: #0d47a1;
  /* 发光光晕阴影特效 - 蓝色光晕 */
  box-shadow: 
    0 0 12px rgba(33, 150, 243, 0.6);
}

.blue .settings-content {
  background: rgba(250, 252, 255, 0.95);
}

.blue .setting-item {
  background: rgba(250, 252, 255, 0.95);
  border: 1px solid rgba(33, 150, 243, 0.2);
}

.blue .setting-item label {
  color: #0d47a1;
}

.blue .setting-description {
  color: #42a5f5;
}

/* 绿色主题适配 */
.green .settings-header {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.green .settings-header h2 {
  color: #2e7d32;
}

.green .settings-sidebar {
  background: linear-gradient(180deg, #e8f5e8 0%, #c8e6c9 100%);
}

.green .menu-item {
  color: #2e7d32;
}

.green .menu-item:hover {
  background-color: rgba(76, 175, 80, 0.2);
  color: #1b5e20;
  /* 发光光晕阴影特效 */
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 0 16px rgba(76, 175, 80, 0.4);
}

.green .menu-item.active {
  background-color: rgba(76, 175, 80, 0.3);
  color: #1b5e20;
  /* 发光光晕阴影特效 */
  box-shadow: 
    0 2px 8px rgba(76, 175, 80, 0.1),
    0 0 16px rgba(76, 175, 80, 0.4);
}

.green .close-btn {
  background: rgba(200, 255, 200, 0.8);
  color: #1b5e20;
}

.green .close-btn:hover {
  background: rgba(220, 250, 220, 1);
  /* 发光光晕阴影特效 - 绿色光晕 */
  box-shadow: 
    0 0 12px rgba(76, 175, 80, 0.6);
}

.green .settings-content {
  background: rgba(248, 255, 248, 0.95);
}

.green .setting-item {
  background: rgba(248, 255, 248, 0.95);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.green .setting-item label {
  color: #2e7d32;
}

.green .setting-description {
  color: #4caf50;
}

/* 紫色主题适配 */
.purple .settings-header {
  background: linear-gradient(135deg, #e8d5f2 0%, #f3e5f5 50%, #f8f0fc 100%);
  border-bottom: 1px solid rgba(156, 39, 176, 0.2);
}

.purple .settings-header h2 {
  color: #6a1b9a;
}

.purple .settings-sidebar {
  background: linear-gradient(180deg, #e8d5f2 0%, #f3e5f5 100%);
}

.purple .menu-item {
  color: #6a1b9a;
}

.purple .menu-item:hover {
  background-color: rgba(156, 39, 176, 0.2);
  color: #4a148c;
  /* 发光光晕阴影特效 */
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 0 16px rgba(156, 39, 176, 0.4);
}

.purple .menu-item.active {
  background-color: rgba(156, 39, 176, 0.3);
  color: #4a148c;
  /* 发光光晕阴影特效 */
  box-shadow: 
    0 2px 8px rgba(156, 39, 176, 0.1),
    0 0 16px rgba(156, 39, 176, 0.4);
}

.purple .close-btn {
  background: rgba(240, 230, 255, 0.8);
  color: #4a148c;
}

.purple .close-btn:hover {
  background: rgba(250, 240, 255, 1);
  /* 发光光晕阴影特效 - 紫色光晕 */
  box-shadow: 
    0 0 12px rgba(156, 39, 176, 0.6);
}

.purple .settings-content {
  background: rgba(252, 245, 255, 0.95);
}

.purple .setting-item {
  background: rgba(252, 245, 255, 0.95);
  border: 1px solid rgba(156, 39, 176, 0.2);
}

.purple .setting-item label {
  color: #6a1b9a;
}

.purple .setting-description {
  color: #9c27b0;
}

/* 深色模式关于页面样式 */
.dark .about-content {
  color: #e2e8f0; /* 更亮的文字颜色 */
}

.dark .about-content h4 {
  color: #ffffff; /* h4标题使用纯白色 */
}

.dark .about-content p {
  color: #cbd5e1; /* 段落文字保持原有亮度 */
}

.dark .about-content a {
  color: #cccccc; /* 链接使用灰色 */
}

.dark .about-content a:hover {
  color: #ffffff; /* 悬停时使用白色 */
}

.dark .about-content .version-info {
  background: #3f3f3f; /* 改为黑灰色调 */
  color: #e2e8f0; /* 文字颜色更亮 */
}

.dark .about-content .feature-list li {
  color: #e2e8f0; /* 列表项文字更亮 */
}

.dark .about-content .feature-list li::before {
  color: #cccccc; /* 列表项标记使用灰色 */
}

/* 深色模式的补充样式 */
.dark .setting-description {
  color: #94a3b8;
}

.dark .setting-label {
  color: #cbd5e1;
}

.dark .version {
  color: #60a5fa;
}

/* 深色主题适配 */
.dark .back-btn {
  background: #2a2a2a;
  color: #cccccc;
}

.dark .back-btn:hover {
  background: #4a4a4a;
  color: #ffffff;
  /* 发光光晕阴影特效 - 白色光晕 */
  box-shadow: 
    0 0 12px rgba(255, 255, 255, 0.6);
}

/* 蓝色主题适配 */
.blue .back-btn {
  background: rgba(197, 225, 255, 0.8);
  color: #0d47a1;
}

.blue .back-btn:hover {
  background: rgba(220, 235, 255, 1);
  color: #0d47a1;
  /* 发光光晕阴影特效 - 蓝色光晕 */
  box-shadow: 
    0 0 12px rgba(33, 150, 243, 0.6);
}

/* 绿色主题适配 */
.green .back-btn {
  background: rgba(200, 255, 200, 0.8);
  color: #1b5e20;
}

.green .back-btn:hover {
  background: rgba(220, 250, 220, 1);
  /* 发光光晕阴影特效 - 绿色光晕 */
  box-shadow: 
    0 0 12px rgba(76, 175, 80, 0.6);
}

/* 紫色主题适配 */
.purple .back-btn {
  background: rgba(240, 230, 255, 0.8);
  color: #4a148c;
}

.purple .back-btn:hover {
  background: rgba(250, 240, 255, 1);
  /* 发光光晕阴影特效 - 紫色光晕 */
  box-shadow: 
    0 0 12px rgba(156, 39, 176, 0.6);
}